<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<image @click="back()" class="back" src="@/static/img/chat-09.png" mode="widthFix"></image>
				<view class="title">委托订单</view>
			</view>
		</view>
		<view class="tab" :style="{ top: totalheight }">
			<view class="t_left" :class="{'t_left_c':contype == 1}" @click="changeType(1)">
				<image :src="contype == 1?left_n:left_y" class="" :class="contype == 1?'up ly':'ln'" mode="heightFix">
				</image>
				<view>委托买入<text :class="{'line':contype == 1}"></text></view>
			</view>
			<view class="t_right" :class="{'t_right_c':contype == 2}" @click="changeType(2)">
				<image :src="contype == 2?right_n:right_y" class="" :class="contype == 2?'up ry':'rn'" mode="heightFix">
				</image>
				<view>委托出售<text :class="{'line':contype == 2}"></text></view>
			</view>
		</view>
		<!-- <view class="comm-main-head">
			<view class="comm-head-top">
				<view class="comm-t-lm" :class="contype == 1 ? 'act-t-lm' : ''"></view>
				<view class="comm-t-lm" :class="contype == 2 ? 'act-t-rm' : ''"></view>
			</view>

			<view class="comm-head-bottom">
				<view class="comm-lm" :class="contype == 2 ? 'act-lm' : ''">
					<view @click="changeType(1)">
						<text :class="contype == 1 ? 'act-tab' : ''">委托买入</text>
					</view>
				</view>

				<view class="comm-lm" :class="contype == 1 ? 'act-rm' : ''">
					<view @click="changeType(2)">
						<text :class="contype == 2 ? 'act-tab' : ''">委托出售</text>
					</view>

				</view>

			</view>
		</view> -->

		<view class="f-sk">
			<view class="comm-tab-item" v-for="(item,index) in tabList" :key="index" @click="changeTab(index)"
				:class="tabIndex == index ? 'act-title' : ''">{{ item }}</view>
		</view>
		<view class="cn">
			<view class="z-item" v-for="(item,index) in dataList" :key="index">
				<view class="im-a">
					<view class="im-a-name">{{contype == 1?'委托买入':'委托出售'}}</view>
					<view v-if="item.newArea=='Y'&&contype==1" class="new">新</view>
					<view class="im-a-status">{{tabIndex ==0?'待交易':'已完成'}}</view>
					<!-- <view class="im-a-status" v-else>{{ item.status ? '交易完成' : '待交易' }}</view> -->
				</view>
				<view class="im-b">
					<view class="price-l">
						<view>
							<text class="l-name">单价：</text>
							<text class="l-data">{{tabIndex ==0?item.unitPrice:item.orderPrice}}U</text>
						</view>
						<view>
							<text class="l-name">{{contype ==1?'买入数量':'出售CC数量'}}：</text>
							<text class="l-data">{{tabIndex ==0? item.buyNum:item.orderNum}}</text>
						</view>
						<!-- <view>
							<text class="l-name">流通值：</text>
							<text class="l-data"></text>
						</view> -->

						<view v-if="contype == 1">
							<text class="l-name">ABT获得时间：</text>
							<text class="l-data" v-if="item.holdDay">{{ item.holdDay }}天</text>
						</view>

						<view v-if="contype == 2">
							<text class="l-name">ABT燃烧数量：</text>
							<text class="l-data">{{ tabIndex ? item.orderNum : item.buyNum}}</text>
						</view>
					</view>
					<view class="price-r">
						<view class="r-ut">{{tabIndex ==0 ?item.planPay:item.orderAmountUsdt}} USDA</view>
						<view class="r-tm"><uni-dateformat :date="item.created" format="MM-dd hh:mm"></uni-dateformat>
						</view>
					</view>
				</view>
				<view class="cancel" v-if="tabIndex==0" @click="open(item.id)">
					取消
				</view>
				<view class="im-c" v-else>
					订单编号：{{item.orderNo}}
				</view>
			</view>

			<uni-popup ref="popup">
					<view class="box">
						<view class="box_title">温馨提示</view>
						<view class="box_text">确认取消{{ contype == 1 ? '买入' : '出售' }}吗？</view>
						<!-- <view class="box_text">钱包密码</view>
						<input type="text" placeholder="请输入钱包密码" :password="showPassword" v-model="password"
							class="theme-ipt-bg"> -->
						<view class="box_btn">
							<view @click="close()" class="btn_1">取消</view>
							<view @click="cancel()" class="btn_2">确认</view>
						</view>
					</view>
			</uni-popup>



			<!-- <view class="z-item" v-for="(item,index) in dataList" :key="index">
				<view class="im-a">
					<view class="im-a-name">委托{{ contype == 1 ? '买入' : '出售' }}</view>
					<view class="im-a-status" v-if="tabIndex">已完成</view>
					<view class="im-a-status" v-else>{{ item.status ? '交易完成' : '待交易' }}</view>
				</view>
				<view class="im-b">
					<view class="price-l">
						<view>
							<text class="l-name">单价：</text>
							<text class="l-data">{{ tabIndex ? item.orderPrice : item.unitPrice }}元</text>
						</view>
						<view>
							<text class="l-name">买入数量：</text>
							<text class="l-data">{{ tabIndex ? item.orderNum : item.buyNum }}</text>
						</view>
						<view>
							<text class="l-name">流通值：</text>
							<text class="l-data">{{ item.dedicate }}</text>
						</view>

						<view v-if="contype == 1">
							<text class="l-name">持有时间：</text>
							<text class="l-data" v-if="item.holdDay">{{ item.holdDay }}天</text>
						</view>
					</view>
					<view class="price-r">
						<view class="r-ut">{{ tabIndex ? item.orderAmount : item.maxPriceUsdt }} USDT</view>
						<view class="r-tm"><uni-dateformat :date="item.created" format="MM-dd hh:mm"></uni-dateformat>
						</view>
					</view>
				</view>
				<view class="im-c" v-if="item.status">
					订单编号：{{ item.orderNo }}
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getMateTrade,
		getTradeOrder,
		cancelMateTrade
	} from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		mixins: [navBarMixin],
		data() {
			return {
				contype: 1,
				tabList: ['待交易', '已完成'],
				tabIndex: 0,
				dataList: [],
				page: 1,
				size: 10,
				total: '',
				isAll: '',
				id: '',
				left_y: '../../static/img/bind-03.png',
				left_n: '../../static/img/bind-05.png',
				right_y: '../../static/img/bind-02.png',
				right_n: '../../static/img/bind-06.png',
			}
		},
		methods: {
			cancel() {
				cancelMateTrade({
					id: this.id
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '取消成功!',
							icon: 'none',
							duration: 2000,
						})
						if (this.tabIndex == 0) {
							this.getMateList()
						} else {
							this.getTradeList()
						}
						// setTimeout(function() {
						// 	uni.navigateBack()
						// }, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000,
						})
					}
					this.close()
					console.log(res);
				})
			},
			open(e) {
				this.id = e
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			back(id) {
				uni.navigateBack()
			},
			changeType(e) {
				this.contype = e
				this.page = 1
				if (this.tabIndex == 0) {
					// this.dataList = 4
					this.getMateList()
				} else if (this.tabIndex == 1) {
					this.getTradeList()
				}
			},

			changeTab(index) {
				console.log(index);
				this.tabIndex = index
				this.page = 1
				this.isAll = '',
					this.total = '',
					this.dataList = []
				// this.info()
				if (index == 0) {
					// this.dataList = 4
					this.getMateList()
				} else if (index == 1) {
					this.getTradeList()
				} else {}
			},
			handleState(e) {
				const statusBrr = ['待交易', '交易中', '交易完成']
				return statusBrr[e]
			},

			async getMateList() {
				const res = await getMateTrade({
					page: this.page,
					size: this.size,
					type: this.contype
				})
				if (res.code == 0) {
					this.total = res.data.total
					const list = this.dataList || []

					if (this.page == 1) {
						this.dataList = res.data.records
					} else {
						this.dataList = list.concat(res.data.records)
					}
					this.isAll = this.dataList.length == this.total ? 0 : 1
				}
			},
			async getTradeList() {
				const res = await getTradeOrder({
					page: this.page,
					size: this.size,
					type: this.contype
				})
				if (res.code == 0) {
					this.total = res.data.total
					const list = this.dataList || []
					if (this.page == 1) {
						this.dataList = res.data.records
					} else {
						this.dataList = list.concat(res.data.records)
					}
					this.isAll = this.dataList.length == this.total ? 0 : 1
				}
			}
		},
		onLoad(e) {
			this.getMateList()
		},
		onReachBottom() {
			if (this.isAll) {
				this.page++;
				if (this.tabIndex == 0) {
					this.getMateList()
				} else {
					this.getTradeList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		// padding: 30rpx;
		overflow: hidden;

		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				// box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(50, 50, 50, 0.1);
				box-sizing: border-box;
				position: relative;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}

				.back {
					width: 20rpx;
					position: absolute;
					left: 30rpx;
				}

			}
		}
	}

	.tab {
		width: 100vw;
		height: 104rpx;
		position: fixed;
		left: 0;
		z-index: 888;
		background-color: white;

		.t_left {
			width: 498rpx;
			height: 104rpx;
			display: flex;
			align-items: center;
			position: absolute;

			image {
				position: absolute;
				left: 0;
				bottom: 0;
			}

			view {
				height: 84rpx;
				line-height: 84rpx;
				z-index: 777;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				font-size: 28rpx;
				color: white;
				margin-left: 90rpx;
			}

		}

		.t_left_c {

			view {
				height: 104rpx;
				line-height: 104rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-left: 116rpx;
			}
		}

		.t_right {
			width: 486rpx;
			height: 104rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			right: 0;
			bottom: 0;

			image {
				position: absolute;
				right: 0;
				bottom: 0;
			}

			view {
				height: 84rpx;
				line-height: 84rpx;
				z-index: 777;
				position: absolute;
				right: 0;
				bottom: 0;
				display: flex;
				font-size: 28rpx;
				color: white;
				margin-right: 100rpx;
			}
		}

		.t_right_c {
			height: 104rpx;

			view {
				height: 104rpx;
				line-height: 104rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-right: 136rpx;
			}
		}

		.line {
			width: 40rpx;
			height: 5rpx;
			background: #58A1FF;
			border-radius: 2rpx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: 20rpx;
		}


		.ln,
		.rn {
			height: 84rpx;
			line-height: 84rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.ly,
		.ry {
			height: 104rpx;
			line-height: 104rpx;
			font-weight: 500;
			font-size: 32rpx;
		}

		.up {
			z-index: 777;
		}
	}

	.comm-main-head {
		height: 100rpx;
		border-top: 10rpx solid #fff;

		.comm-head-top {
			height: 20rpx;
			display: flex;

			.comm-t-lm {
				flex: 1;
				background-color: #fff;

				&.act-t-lm {
					position: relative;
					background: #f7f7f7;

					&::after {
						content: '';
						position: absolute;
						right: 0;
						top: 0;
						height: 20rpx;
						width: 20rpx;
						background: linear-gradient(225deg, #fff, #fff 50%, transparent 50%, transparent 100%);
					}
				}

				&.act-t-rm {
					position: relative;
					background: #f7f7f7;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						height: 20rpx;
						width: 20rpx;
						background: linear-gradient(135deg, #fff, #fff 50%, transparent 50%, transparent 100%);
					}
				}

			}
		}

		.comm-head-bottom {
			height: 80rpx;
			display: flex;
			border-radius: 8rpx 8rpx 0 0;
			overflow: hidden;

			.comm-lm {
				width: 50%;
				height: 100%;
				padding-top: 16rpx;

				// font-size: 28rpx;
				padding: 0 80rpx;
				text-align: center;

				&>view {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&.act-lm {
					position: relative;
					background: linear-gradient(180deg, #D9ADFC 0%, #FFFFFF 97%);

					&:after {
						content: '';
						position: absolute;
						right: 0;
						bottom: 0;
						width: 80rpx;
						height: 80rpx;
						background: linear-gradient(315deg, #f7f7f7, #f7f7f7 50%, transparent 50%, transparent 100%);
					}
				}

				text {
					margin: 0 auto;
					padding-bottom: 14rpx;
					font-size: 28rpx;

					&.act-tab {
						position: relative;
						font-size: 32rpx;
						color: #B75FFD;

						&::after {
							content: '';
							position: absolute;
							width: 36rpx;
							height: 4rpx;
							border: 4rpx;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							background: #B75FFD;
						}
					}
				}

				&.act-rm {
					position: relative;
					background: linear-gradient(180deg, #D9ADFC 0%, #FFFFFF 97%);

					&:after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 80rpx;
						height: 80rpx;
						background: linear-gradient(45deg, #f7f7f7, #f7f7f7 50%, transparent 50%, transparent 100%);
					}
				}
			}
		}


	}

	.cn {
		padding: 30rpx;
	}

	.f-sk {
		margin-top: 104rpx;
		// background-color: palevioletred;
		display: flex;
		justify-content: space-between;
		// background: #f7f7f7;
		margin: 134rpx 30rpx 10rpx;

		.comm-tab-item {
			width: 124rpx;
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 10rpx;
			color: #999;
			font-size: 28rpx;
			text-align: center;

			&.act-title {
				position: relative;
				font-weight: 500;
				color: #fff;
				font-size: 32rpx;
				background: #3F93FF;
			}
		}
	}

	.z-item {
		margin-top: 30rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 14rpx;

		&:first-child {
			margin-top: 0;
		}

		.im-a {
			display: flex;
			// justify-content: space-between;
			align-items: center;

			.im-a-name {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}
			
			.new{
				font-size: 26rpx;
				width: 36rpx;
				height: 36rpx;
				line-height: 36rpx;
				border: 1rpx solid red;
				color: red;
				border-radius: 50%;
				text-align: center;
				margin-right: 30rpx;
			}

			.im-a-status {
				font-size: 24rpx;
				color: #3F93FF;
			}
		}

		.im-b {
			padding: 30rpx 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price-l {
				text {
					font-size: 24rpx;

					&.l-name {
						display: inline-block;
						min-width: 120rpx;
						color: #999;
					}

					&.l-data {
						color: #333;
					}
				}
			}

			.price-r {
				.r-ut {
					color: #FF453A;
					font-size: 36rpx;
				}

				.r-tm {
					color: #999;
					font-size: 24rpx;
					text-align: right;
				}
			}
		}

		.im-c {
			margin-top: 30rpx;
			padding-top: 20rpx;
			color: #999;
			font-size: 24r;
			border-top: 2rpx solid #eee;
			word-break: break-all;
		}
	}

	.cancel {
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 24rpx;
		font-size: 26rpx;
		color: white;
		background: #3F93FF;
		margin: 20rpx 0 0 auto;
	}


		.box {
			
				width: 583rpx;
				height: 630rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				// background: #fff;
				background: url('../../static/img/me-32.png') no-repeat;
				background-size: contain;
				overflow: hidden;
				position: relative;

			.theme-ipt-bg {
				padding: 0 20rpx;
				margin-top: 30rpx;
				background: #F7F7F7;
			}
			.box_title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
				margin-top: 220rpx;
			}
			
			.box_text {
				font-size: 28rpx;
				text-align: center;
				margin: 70rpx 40rpx 30rpx 40rpx;
			}
			
			.box .box_text {
				margin-bottom: 10rpx;
			}
			
			.box input {
				// background-color: #F7F7F7;
				margin: 0 40rpx;
				height: 72rpx;
				border-radius: 8rpx;
				font-size: 26rpx;
				padding-left: 20rpx;
			}
			
			.box_btn {
				display: flex;
				justify-content: space-between;
				margin: 100rpx 52rpx 0;
				
				view {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
				}
				.btn_1 {
					border: 2rpx solid #3F93FF;
					border-radius: 40rpx;
					color: #3F93FF;
				}
				.btn_2 {
					border-radius: 40rpx;
					background: #3F93FF;
					color: #fff;
				}
			}
		}
		::v-deep .uni-popup {
			z-index: 999;
		}
</style>